<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
    <script src="js/jquery-3.2.1.js"></script>
</head>
<style>
*{
    text-align: center;
}
a{
    text-decoration: none;
}
ul,li{
    list-style-type: none;
}
.box{
    width: 1366px;
    height: 768px;
    margin: 0px auto;
}
.core{
    width: 400px;
    height: 550px;
    border: 1px solid cornflowerblue;
    position: relative;
    margin-left: 50px;
    margin-top: -658px;
}
.tt{
    width: 400px;
    height: 200px;
    position: relative;
}
.er{
    width: 400px;
    height: 350px;
    position: relative;
    background-color: white;
    margin-top: -16px;
}
#Input{
    width: 150px;
    height: 15px;
    margin-top: 30px;
    margin-left: 40px;
}
#Code{  
    font-family:Arial;  
    font-style:italic;  
    font-weight:bold;  
    border:0;  
    letter-spacing:2px;  
    color:blue;  
}
#anNiu{
    width: 60px;
    height: 40px;
    margin-top: 30px;
}
</style>
<body>
    <div class="box" id="box">
        <img src="imgs/dl1.jpg" width="1366" height="768" id="bigin" /> 
        <div class="core">
            <form>
                <div class="tt">
                    <img src="imgs/a1.jpg" width="400" height="200">
                </div>
                <div class="er">
                    <p>用户账号</p>
                    <input type="text" id="User" maxlength="20" minlength="8" placeholder="8-20位且以字母开头">
                    <p>用户密码</p>
                    <li><input type="password" id="Pwd" maxlength="20" minlength="8" placeholder="8-20字母和数字组成"></li>
                    <input type = "text" id = "Input"/> 
                    <input type = "button" id="Code" onclick="createCode()"/>
                    <li><input type="submit" value="登录" id="anNiu" onclick="miMa()"/></li> 
                </div>
            </form>
        </div>
    </div>
</body>
<script>
    function miMa(){
        var password=document.getElementById("Pwd"); //获取密码框值
        var name=document.getElementById("User");//获取用户名框值
        var inputCode = document.getElementById("Input").value.toUpperCase(); //取得输入的验证码并转化为大写  
        if(password.value.length==0 && name.value.length==0 ){//当用户名框值和密码框值等于0时
            alert("请输入用户名和密码！");
            return false;
        }
        else if(name.value.length<8){
            alert("用户名请输入8-20位且以字母开头！");
            return false;
        }   
        else if(password.value.length==0){//当密码框值等于0时
            alert("请输入密码！");
            return false;
        }
        else if(password.value.length<8){
            alert("密码太短了！");
            return false;
        }
        else if(inputCode.length == 0){//当验证码框值等于0时
            alert("请输入验证码！");
        }
        else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
            alert("验证码输入错误!"); //则弹出验证码输入错误  
            return false;  
        }       
        else{
            alert("登陆成功，确定跳转？");
            window.history.back(-1);
            return true;
        }  
    }
    var code ; //在全局定义验证码   
    //产生验证码  
    window.onload = function createCode(){  
        code = "";   
        var codeLength = 4;//验证码的长度  
        var checkCode = document.getElementById("Code");   
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',  
        'S','T','U','V','W','X','Y','Z');//随机数  
        for(var i = 0; i < codeLength; i++) {//循环操作  
            var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
            code += random[index];//根据索引取得随机数加到code上  
        }  
        checkCode.value = code;//把code值赋给验证码  
    }  

    var curIndex=0; 
    //时间间隔 单位毫秒 
    var nowTim=3000; 
    var arr=new Array(); 
    arr[0]="dl1.jpg"; 
    arr[1]="dl2.jpg"; 
    arr[2]="dl3.jpg"; 
    arr[3]="dl4.jpg"; 
    arr[4]="dl5.jpg"; 
    arr[5]="dl6.jpg"; 
    arr[6]="dl7.jpg"; 
    setInterval(changeImg,nowTim); 
    function changeImg() 
    { 
        var obj=document.getElementById("bigin"); 
        if (curIndex==arr.length-1) { 
            curIndex=0; 
        } 
        else { 
            curIndex+=1; 
        } 
        obj.src="imgs/"+arr[curIndex]; 
    } 

</script>
</html>